import React, {PureComponent} from 'react'
import { connect } from 'react-redux'
import { 
  WriterWrapper,
  WriterHeader, 
  WriterContent,
  WriterItem,
  WriterFooter
} from '../style' 

class Writer extends PureComponent{
  render() {
    const { writerList } = this.props
    return (
      <WriterWrapper>
        <WriterHeader>
          <div className='header-left'>推荐作者</div>
          <div className='header-right'>换一批</div>
        </WriterHeader>
        <WriterContent>
          {writerList.map((item, index) => {
            return (
              <WriterItem key={item.get('id')}>
                <img className='writer-item-img' src={item.get('imgUrl')} alt='' />
                <div className='writer-item-desc'>
                  <div className='writer-item-attention'>+关注</div>
                  <div className='writer-item-info'>
                    <span>{item.get('author')}</span>
                    <p>{item.get('desc')}</p>
                  </div>
                </div>
              </WriterItem>
            )
          })}
          <WriterFooter>查看全部</WriterFooter>
        </WriterContent>
      </WriterWrapper>
    )
  }
}
const mapStateToProps = (state) => {
  return {
    writerList: state.getIn(['home','writerList'])
  }
}

export default connect(mapStateToProps)(Writer)